<template>
    <div>
        <div id="barrage" class="anim-opacity2"  v-if="show">
            <img :src="barrage[0].imgurl" style="margin-left:.01rem;" >
            <span class="BarName" >{{barrage[0].name}}</span>
            <span class="BarTime" >{{count}}秒前发起了砍价</span>
        </div>

    </div>
</template>

<script>
    import barrageJson from '../../barrage.json';
    export default {
        name: "barrage",
        data(){
            return{
                barrage:{},
                start:0,
                show:false,
                count:Number,
                num:Number,
                timer:{}
            }
        },
        methods:{
            barrageInit(){
                var _self=this;
                _self.$set(_self.barrage,0,barrageJson.data[_self.count]);
            }
        },
        activated(){

        },
        mounted(){
            var that=this;
            this.$nextTick(function () {
              this.num=barrageJson.data.length;
              this.timer=setInterval(function(){
                  that.count=Math.ceil(Math.random()*that.num);
                /*  that.count=Math.ceil(Math.random()*that.num);*/
                setTimeout(function(){
                    that.show=true;
                },Math.floor(Math.random()*60)*1000+3000);
                  setTimeout(function(){
                      that.show=false;
                  },Math.floor(Math.random()*60)*1000+6000)
                  that.barrageInit();
                /*  clearInterval(that.timer);*/
              },Math.floor(Math.random()*60)*1000)

            })
        }
    }
</script>

<style scoped>

</style>